<?php
/**
 * Created by PhpStorm.
 * User: KaZeline
 * Date: 15-4-20
 * Time: 下午5:46
 */
header("Content-type: text/html; charset=utf-8");
$type = 'map';
$mid = array(7517=>'厦门鼓浪屿',108=>'三亚休闲游',4=>'先行旅游');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>订单手机归属地统计图--testing</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <script src="http://www.12301.cc/js/zy_Calendar.js" type="text/javascript"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 能搜索的选择条 -->
    <!--<link rel="stylesheet" type="text/css" href="http://www.12301.cc/css/select2.css"> -->
    <link rel="stylesheet" type="text/css" href="http://www.12301.cc/module/zax/baiduline/line.css">
    <link href="http://echarts.baidu.com/doc/asset/css/carousel.css" rel="stylesheet">
    <link href="http://echarts.baidu.com/doc/asset/css/bootstrap.css" rel="stylesheet">
    <link href="http://echarts.baidu.com/doc/asset/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://echarts.baidu.com/doc/asset/css/codemirror.css" rel="stylesheet">
    <link href="http://echarts.baidu.com/doc/asset/css/monokai.css" rel="stylesheet">
    <script src="http://www.12301.cc/js/select2.js"></script>
    <style>
        #main {
            width: 600px;
            height: 600px;
        }
    </style>
</head>

<body>

<form name="ti" action="" method="get">

    查询日期选择:<br/>
    <input id="threeDayTrigger" checked="checked" class="dateTrigger threeDayTrigger" type="radio" name="dateTrigger" value="<?=date('Y-m-d',strtotime('-1days'))?>"/><label for="threeDayTrigger">1天内</label>
    <input id="threeDayTrigger" class="dateTrigger threeDayTrigger" type="radio" name="dateTrigger" value="<?=date('Y-m-d',strtotime('-3days'))?>"/><label >3天内</label>
    <input id="weekTrigger" class="dateTrigger weekTrigger" type="radio" name="dateTrigger" value="<?=date('Y-m-d',strtotime('-7days'))?>"/><label for="weekTrigger">1周内</label>
    <input id="monthTrigger" class="dateTrigger monthTrigger" type="radio" name="dateTrigger" value="<?=date('Y-m-d',strtotime('-30days'))?>"/><label for="monthTrigger">1个月内</label>
    <input id="cType" type="hidden" value="map"/>
    景区ID:
    <select  name="lid" id="jqSelect">
        <option value="">请选择会员</option>
        <?foreach($mid as $k => $v){?>
            <option value="<?=$k?>" <?if($k==$_GET['lid'])echo 'selected="selected"';?>><?=$v?></option>
        <?}?>
    </select>

</form>
<!-- Fixed navbar -->
<!--
<div id="echartContainer" class="echartContainer">
    <div id="echartContainerCon" class="echartContainerCon"></div>
</div>

<div class="btnW1">
    <span><input type="submit" id="queryChartBtn" class="echartBtn query" value="查询"/>
     <input type="submit"  style="margin-right:0" id="refreshChartBtn" class="echartBtn refresh" value="刷新"/></span>
</div>
-->
<div id="graphic" class="col-md-8">
    <div id="main" class="main" style="height: 530px;"></div>
    <div>
        <button type="button" class="btn btn-sm btn-success"
            onclick="refresh(true)"
            >刷 新</button>
        <span  id='wrong-message' style="color:red"></span>
    </div>
</div><!--/span-->
</div><!--/row-->

<div class="container-fluid" >
    <div class="row-fluid example">
        <div id="sidebar-code" class="col-md-4">
            <div class="well sidebar-nav" /*style="display: none"*/>
            <div class="nav-header" ><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize"></a></div>
            <textarea id="code" name="code">
                var ecConfig = require('echarts/config');
                var zrEvent = require('zrender/tool/event');
                var curIndx = 0;
                var mapType = [
                'china',
                // 23个省
                '广东', '青海', '四川', '海南', '陕西',
                '甘肃', '云南', '湖南', '湖北', '黑龙江',
                '贵州', '山东', '江西', '河南', '河北',
                '山西', '安徽', '福建', '浙江', '江苏',
                '吉林', '辽宁', '台湾',
                // 5个自治区
                '新疆', '广西', '宁夏', '内蒙古', '西藏',
                // 4个直辖市
                '北京', '天津', '上海', '重庆',
                // 2个特别行政区
                '香港', '澳门'
                ];
                document.getElementById('main').onmousewheel = function (e){
                var event = e || window.event;
                curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
                if (curIndx < 0) {
                curIndx = mapType.length - 1;
                }
                var mt = mapType[curIndx % mapType.length];
                if (mt == 'china') {
                option.tooltip.formatter = '滚轮切换或点击进入该省<br/>{b}';
                }
                else{
                option.tooltip.formatter = '滚轮切换省份或点击返回全国<br/>{b}';
                }
                option.series[0].mapType = mt;
                option.title.subtext = mt + ' （滚轮或点击切换）';
                myChart.setOption(option, true);

                zrEvent.stop(event);
                };
                myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                var len = mapType.length;
                var mt = mapType[curIndx % len];
                if (mt == 'china') {
                // 全国选择时指定到选中的省份
                var selected = param.selected;
                for (var i in selected) {
                if (selected[i]) {
                mt = i;
                while (len--) {
                if (mapType[len] == mt) {
                curIndx = len;
                }
                }
                break;
                }
                }
                option.tooltip.formatter = '滚轮切换省份或点击返回全国<br/>{b}';
                }
                else {
                curIndx = 0;
                mt = 'china';
                option.tooltip.formatter = '滚轮切换或点击进入该省<br/>{b}';
                }
                option.series[0].mapType = mt;
                option.title.subtext = mt + ' （滚轮或点击切换）';
                myChart.setOption(option, true);
                });
                option = {
                title: {
                text : '全国34个省市自治区',
                subtext : 'china （滚轮或点击切换）'
                },
                tooltip : {
                trigger: 'item',
                formatter: '滚轮切换或点击进入该省<br/>{b}'
                },
                legend: {
                orient: 'vertical',
                x:'right',
                data:['订单数']
                },
                dataRange: {
                min: 0,
                max: 100,
                color:['red','yellow'],
                text:['高','低'],           // 文本，默认为数值文本
                calculable : true
                },
                series : [
                {
                name: '订单数',
                type: 'map',
                mapType: 'china',
                selectedMode : 'single',
                itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
                },
                data:[
                {name: '重庆市',value: Math.round(Math.random()*1000)}
                ]
            }
        ]
    };

            </textarea>
        </div><!--/.well -->
    </div><!--/span-->
</div><!--/.fluid-container-->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--
<script type="text/javascript" src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript" src="http://www.12301.cc/js/global/www.12301.cc.global.js"></script>
    <script type="text/javascript" src="http://www.12301.cc/module/zax/baiduline/map.js"></script>
    -->
<script src="http://echarts.baidu.com/doc/example/www/js/echarts.js"></script>
<script src="http://echarts.baidu.com/doc/asset/js/codemirror.js"></script>
<script src="http://echarts.baidu.com/doc/asset/js/javascript.js"></script>
<script src="http://echarts.baidu.com/doc/asset/js/bootstrap.min.js"></script>
<script src="http://www.12301.cc/module/zax/baiduline/echartsExample.js"></script>
<script type="text/javascript" src="http://www.12301.cc/js/global/www.12301.cc.global.js"></script>
<script src="map.js"></script>
<script>
$('.cm-s-monokai').css('width','500px');
</script>

</body>
</html>